<template>
	<div class="navMenu">
		<div v-for="navMenu in navMenus">
			<!-- 最后一级菜单 -->
			<el-menu-item v-if="!navMenu.children && navMenu" :key="navMenu.id" :data="navMenu" :index="navMenu.name">
				<i :class="navMenu.icon"></i>
				
				<span slot="title">{{ navMenu.label }}
					<span class="biaoshi" v-if="navMenu.ordername=='XiaoXi' && $store.state.user.xiaoxi !=0 ">{{$store.state.user.xiaoxi}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='orderone' && $store.state.user.order.count5 !=0 ">{{$store.state.user.order.count5}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='tixian' && $store.state.user.tixian !=0 ">{{$store.state.user.tixian}}</span>
					<!-- <span class="biaoshi" v-else-if="navMenu.ordername=='ordertwo' && $store.state.user.order.count1 ">{{$store.state.user.order.count1}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='orderthree' && $store.state.user.order.count2 ">{{$store.state.user.order.count2}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='orderfour' && $store.state.user.order.count3 ">{{$store.state.user.order.count3}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='orderfive' && $store.state.user.order.count4 ">{{$store.state.user.order.count4}}</span> -->
                    <span class="biaoshi" v-else-if="navMenu.ordername=='shifushenhe' && $store.state.user.shifu.count1 !=0 ">{{$store.state.user.shifu.count1}}</span>
					
					<!-- <span class="biaoshi" v-else-if="navMenu.ordername=='shifulist' && $store.state.user.shifu.count2 ">{{$store.state.user.shifu.count2}}</span> -->
					<!-- <span class="biaoshi" v-else-if="navMenu.parentId!=0">{{navMenu.parentId}}</span> -->
				</span>
				
			</el-menu-item>

			<!-- 此菜单下还有子菜单 -->
			<el-submenu v-if="navMenu.children && navMenu" :key="navMenu.id" :data="navMenu" :index="navMenu.name">
				<div slot="title" style="display:flex;flex-direction: row;align-items: center;">
					<i :class="navMenu.icon"></i>
					<span>{{ navMenu.label }}
						
					</span>
					<span class="biaoshi" v-if="navMenu.ordername=='orderone' && $store.state.user.order.count5 !=0 ">{{$store.state.user.order.count5}}</span>
					<span class="biaoshi" v-else-if="navMenu.ordername=='shifushenhe' && $store.state.user.shifu.count1 !=0 ">{{$store.state.user.shifu.count1}}</span>
				</div>
				<!-- 递归 -->
				<NavMenu :navMenus="navMenu.children"></NavMenu>
			</el-submenu>
		</div>
	</div>
</template>

<script>
export default {
	name: 'NavMenu',
	props: ['navMenus'],
	data() {
		return {
			
		};
	},
	mounted() {
		
	},
	methods: {}
};
</script>

<style scoped>
.biaoshi{
	/* position: absolute; */
	/* right: 40%; */
	position: relative;
	padding: 4px;
	height: 15px !important;
	border-radius: 50%;
	background-color: red;
     margin-left: 15px;
	top: 0;
	display: flex;
    align-items: center;
}
.el-menu-item * {
    vertical-align: middle;
    position: relative;
    display: flex;
    align-items: center;
}
</style>
